<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>实时投票大屏</title>
  <link rel="stylesheet" href="/styles.css" />
  <script src="/socket.io/socket.io.js"></script>
  <script defer src="/scoreboard.js"></script>
</head>
<body>
  <header>
    <h1 id="voteTitle">实时投票大屏</h1>
    <p id="voteDesc">倒计时结束后自动锁定投票，并高亮显示领先者。</p>
  </header>
  <main>
    <section class="timer-card">
      <h2 id="timerTitle">投票倒计时</h2>
      <div id="countdown" class="countdown">-- : -- : --</div>
      <p id="statusText" class="notice">正在初始化…</p>
    </section>

    <section>
      <div class="participant-grid" id="participantGrid">
        <!-- 动态填充选手 -->
      </div>
    </section>

    <section class="qr-card">
      <h2>扫码立即投票</h2>
      <div class="qr-wrapper">
        <img id="qrImage" alt="投票二维码" />
        <p class="notice">使用手机扫码进入投票页面。二维码指向 <span id="qrUrl"></span></p>
      </div>
    </section>
  </main>
</body>
</html>
